<template>
  <view class="flex-col page">
    <view class="flex-col group">
      <view class="flex-row justify-between items-center section">
        <!-- 返回 -->
        <image
          class="image_2"
          src="../../static/wx/352bcfea5e37ee83dcf43eff1e8d6461.png"
        />
        <!-- <image class="image" src="../../static/wx/8fc04065876b2340081413935ac9b119.png" /> -->
      </view>
      <!-- banner -->
	  
	  <!-- banner -->
	  <image class="shrink-0 image_top" :src="pic" />
	  
	  <view class="flex-col relative group_2">
	  	<text class="goods_title">{{ goodsInfo.basicInfo.name }}</text>
	  	<!-- <view class="flex-col justify-start items-start self-center relative section_2">
	  		<image class="shrink-0 image_3" src="../../static/wx/2701f3ca78756182bb620256537a531a.png" />
	  		<text class="text pos">{{ goodsInfo.basicInfo.name }}</text>
	  		<text class="font text_2 pos_2">{{ goodsInfo.basicInfo.subName }}</text>
	  		<text class="font_2 text_3 pos_3">￥{{ goodsInfo.basicInfo.minPrice }}</text>
	  	</view> -->
	  	<view class="flex-row equal-division">
	  		<view class="banner_img" v-for="(image, index) in 10" :key="index">
	  		<image
	  		  :class="index == 0 ? 'ml-10 img_active' : 'ml-10'"
	  		  class="image_4 equal-division-item"
	  		  src="../../static/wx/5d0b2a2d870e718564c540228609e292.png"
	  		/>
	  		<view v-if="index == 0" class="self-start dot "></view>
	  	</view>
	  	</view>
	  		
	  </view>
	  
	  
      <image
        class="shrink-0 image_top"
        src="../../static/wx/2701f3ca78756182bb620256537a531a.png"
      />

      <view class="flex-col relative group_2">
        <!-- <text class="goods_title">蜡笔小新懒人手机支架可爱卡通动漫手办</text> -->
        <view
          class="flex-col justify-start items-start self-center relative section_2"
        >
          <image
            class="shrink-0 image_3"
            src="../../static/wx/2701f3ca78756182bb620256537a531a.png"
          />
          <text class="text pos">蜡笔小新懒人手机支架可爱卡通动漫手办</text>
          <text class="font text_2 pos_2">机箱桌面摆件</text>
          <text class="font_2 text_3 pos_3">￥45.5</text>
        </view>
        <view class="flex-row equal-division">
          <image
            class="image_4 equal-division-item img_active"
            src="../../static/wx/5d0b2a2d870e718564c540228609e292.png"
          />
          <image
            class="ml-10 image_4 equal-division-item"
            src="../../static/wx/5ecbc8ba74a141d11da73ad9a51f178c.png"
          />
          <image
            class="ml-10 image_4 equal-division-item"
            src="../../static/wx/9863b34c43673de74bb3845f1d0df86f.png"
          />
        </view>
        <view class="self-start dot dot1"></view>
      </view>
      <!-- 服务 -->
      <view class="flex-col section_4">
        <view class="flex-col">
          <view class="flex-row items-center">
            <text class="font_3 text_4">服务</text>
            <text class="font ml-13">不支持7天无理由退货</text>
          </view>
          <view class="mt-12 flex-row items-center">
            <text class="font_3 text_5">配送</text>
            <view class="ml-12 flex-col justify-start text-wrapper"
              ><text class="text_6">平台自配</text></view
            >
          </view>
        </view>
        <view class="mt-22 flex-col">
          <view class="flex-row justify-between items-center self-stretch">
            <view class="flex-row items-center">
              <text class="font_3 text_7">送至</text>
              <text class="font ml-13">暂无地址</text>
            </view>
            <image
              class="image_6"
              src="../../static/wx/b16503b7e63b4c997f0e63cc76a2d11f.png"
            />
          </view>
          <text class="mt-8 self-start text_8">现在下单，预计72小时内发货</text>
        </view>
      </view>
    </view>
    <!-- 介绍 -->
    <view class="flex-col group_3 mt-33">
      <!-- tab -->
      <view class="flex-col">
        <view
          class="flex-row justify-between items-center self-stretch group_4"
        >
          <text class="font_4 text_9" @click="tag = 1">商品详情</text>
          <view class="flex-row items-center" @click="tag = 2">
            <text class="font_4 text_10">评分</text>
            <text class="font_4 text_11 ml-5">5.0</text>
            <image
              class="shrink-0 image_7 ml-5"
              src="../../static/wx/5abbde5a3248ff762c91730a2f9bdf7f.png"
            />
          </view>
          <text class="font_4" @click="tag = 3">规格参数</text>
        </view>
        <view class="self-start section_5" :class="'tag' + tag"></view>
      </view>
      <!-- 商品详情 -->
      <view class="mt-30 flex-col" v-if="tag == 1">
        <view class="flex-row items-center">
          <image
            class="image_8"
            src="../../static/wx/64e222e27b2c686b107b8225de9f393f.png"
          />
          <text class="ml-16 font text_12">产品名称:青蛙帽子小新</text>
        </view>
        <view class="flex-row items-center mt-13">
          <image
            class="image_8"
            src="../../static/wx/64e222e27b2c686b107b8225de9f393f.png"
          />
          <text class="ml-16 font">产品材质:搪胶</text>
        </view>
        <view class="flex-row items-center mt-13">
          <image
            class="image_8"
            src="../../static/wx/64e222e27b2c686b107b8225de9f393f.png"
          />
          <text class="ml-16 font text_13">产品包装:OPP袋装</text>
        </view>
        <view class="flex-row items-center mt-13">
          <image
            class="image_8"
            src="../../static/wx/64e222e27b2c686b107b8225de9f393f.png"
          />
          <text class="ml-16 font">产品尺寸:见下方图示</text>
        </view>
        <view class="detail_boxs"
          ><image
            class="self-center detail_img"
            src="../../static/wx/ea85fa35b7b619d3cc7839d88d0e3447.png"
            mode="widthFix"
        /></view>
      </view>
      <!-- 评分 -->
      <template v-if="tag == 2">
        <view class="flex-col items-center score" v-if="score.length == 0">
          <image
            class="score_no_img"
            src="../../static/wx/894cb874921cb05bb2982875e6d272ea.png"
          />
          <text class="mt-14 font_2 score_no_txt"
            >此商品暂时还没有买家评论哦~</text
          >
        </view>
        <view class="mt-30 flex-col items-end relative score_box" v-else>
          <view class="flex-col pos_4">
            <view
              class="flex-col list-item mt-15"
              v-for="(item, index) in score"
              :key="index"
            >
              <view class="flex-row justify-between items-center score_box_msg">
                <view class="flex-row items-center">
                  <image
                    class="shrink-0 score_box_img"
                    src="../../static/wx/7288ea8840fb4ee91c3988c752ade1d8.png"
                  />
                  <text class="ml-16 font score_box_text">豌***子</text>
                </view>
                <view class="flex-row items-center">
                  <text class="score_box_part">5.0</text>
                  <u-rate
                    active-color="#FF841B"
                    inactive-color="#E6E9F1"
                    gutter="10"
                    size="30"
                  ></u-rate>
                </view>
              </view>
              <view class="flex-col score_box_cont">
                <image
                  class="shrink-0 self-start score_box_cont_img"
                  src="../../static/wx/84df1c688c8776374a3020d3deda6786.png"
                />
                <text class="self-stretch score_box_cont_text mt-11">
                  总体来说，设计有趣且实用。感觉应该做做工再好一点，多些造型图案更好
                </text>
              </view>
            </view>
          </view>
        </view>
      </template>
      <!-- 规格参数 -->
      <view class="mt-30 flex-col" v-if="tag == 3">
        <view class="flex-row items-center">
          <image
            class="image_8"
            src="../../static/wx/64e222e27b2c686b107b8225de9f393f.png"
          />
          <text class="ml-16 font text_12">产品名称:青蛙帽子小新</text>
        </view>
        <view class="flex-row items-center mt-13">
          <image
            class="image_8"
            src="../../static/wx/64e222e27b2c686b107b8225de9f393f.png"
          />
          <text class="ml-16 font">产品材质:搪胶</text>
        </view>
        <view class="flex-row items-center mt-13">
          <image
            class="image_8"
            src="../../static/wx/64e222e27b2c686b107b8225de9f393f.png"
          />
          <text class="ml-16 font text_13">产品包装:OPP袋装</text>
        </view>
        <view class="flex-row items-center mt-13">
          <image
            class="image_8"
            src="../../static/wx/64e222e27b2c686b107b8225de9f393f.png"
          />
          <text class="ml-16 font">产品尺寸:见下方图示</text>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <view class="detail_footer_gap"></view>
    <view class="flex-row justify-center items-center detail_footer mt-33">
      <image
        class="image_11"
        src="../../static/wx/4f1bdb42ffd7bd0e8742495e8be756ad.png"
      />
      <view class="flex-row items-center group_5 ml-13">
        <image
          class="shrink-0 image_9"
          src="../../static/wx/5b27a14e7997adcdd0eedb6367c409bf.png"
        />
        <text class="ml-14 text_14">1</text>
        <image
          class="ml-14 shrink-0 image_9 image_10"
          src="../../static/wx/341166f386487dbadae87d117b6f09b1.png"
        />
      </view>
      <view class="flex-row section_7 ml-13">
        <text class="font_2 text_15">加入购物车</text>
        <image
          class="ml-6 shrink-0 image_12"
          src="../../static/wx/44c7da27a7d6b0711cc886ccb61e19fb.png"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      tag: 2,
      score: [1, 2],
    };
  },

  methods: {},
};
</script>

<style scoped lang="css">
	/* @import "@/static/jd/base.scss"; */

	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-13 {
		margin-top: 26rpx;
	}

	.mt-33 {
		margin-top: 66rpx;
	}

	.ml-13 {
		margin-left: 26rpx;
	}

	.page {
		padding-bottom: 64rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 118rpx 56rpx 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.image_2 {
		width: 48rpx;
		height: 44rpx;
	}

	.image {
		width: 52rpx;
		height: 52rpx;
	}

	.group_2 {
		margin-top: -150rpx;
		padding: 0 26rpx;
	}

	.section_2 {
		background-color: #ffffff;
		border-radius: 60rpx;
		box-shadow: 0rpx 8rpx 20rpx #c97e7e1a;
		overflow: hidden;
		width: 536rpx;
		height: 272rpx;
	}

	.image_top {
		width: 100%;
		height: 670rpx;
		border-radius: 0 0 50rpx 50rpx;
	}

	.image_3 {
		margin-left: -96rpx;
		margin-top: -382rpx;
		border-radius: 0rpx 0rpx 120rpx 120rpx;
		filter: blur(15rpx);
		width: 100vw;
		height: 89.3333vw;
	}

	.text {
		color: #2d3142;
		font-size: 48rpx;
		font-family: Lantinghei SC;
		line-height: 72rpx;
		width: 432rpx;
	}

	.pos {
		position: absolute;
		left: 50%;
		top: 34.26rpx;
		transform: translateX(-50%);
	}

	.font {
		font-size: 32rpx;
		font-family: Lantinghei SC;
		line-height: 30.12rpx;
		color: #2d3142;
	}

	.text_2 {
		line-height: 30rpx;
	}

	.pos_2 {
		position: absolute;
		left: 48.62rpx;
		bottom: 58.38rpx;
	}

	.font_2 {
		font-size: 32rpx;
		font-family: Mukta;
		font-weight: 600;
	}

	.text_3 {
		color: #2d3142;
		line-height: 23.94rpx;
	}

	.pos_3 {
		position: absolute;
		right: 34.94rpx;
		bottom: 57.68rpx;
	}

	.equal-division {
		align-self: flex-start;
		margin-top: 40rpx;
		display: block;
		overflow: auto;
		width: 100%;
	}

	.equal-division-item {
		flex: unset;
		margin-bottom: 10rpx;
	}

	.image_4 {
		border-radius: 30rpx;
		filter: drop-shadow(0rpx 8rpx 15rpx #fd878733);
		height: 112rpx;
		width: 112rpx;
		display: inline-block;
	}
	.banner_img{
		width: 136rpx;
		text-align: center;
		display: inline-block;
		margin:0 0 20rpx 0;
	}

	.image_5 {
		flex: unset;
		margin-top: 10rpx;
	}

	.equal-division-item_2 {
		border-radius: 30rpx;
		height: 112rpx;
	}

	.dot {
		margin-left: 72rpx;
		margin-top: -5rpx;
		background-color: #ff841b;
		border-radius: 50%;
		width: 8rpx;
		height: 8rpx;
	}

	.dot1 {
		margin-left: 52rpx;
	}

	.dot2 {
		margin-left: 180rpx;
	}

	.dot3 {
		margin-left: 310rpx;
	}

	.dot4 {
		margin-left: 440rpx;
	}

	.dot5 {
		margin-left: 550rpx;
	}

	.dot6 {
		margin-left: 660rpx;
	}

	.tag2 {
		margin-left: 270rpx;
	}

	.tag3 {
		margin-left: 545rpx;
	}

	.section_4 {
		margin: 44rpx 20rpx 0;
		padding: 40rpx;
		background-color: #d9d9d933;
		border-radius: 20rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: Mukta;
		line-height: 26.44rpx;
		color: #2d3142cc;
	}

	.text_4 {
		line-height: 25.82rpx;
	}

	.text_5 {
		padding: 4rpx 0;
		line-height: 25.64rpx;
	}

	.text-wrapper {
		padding: 4rpx 0;
		background-color: #f0800026;
		height: 32rpx;
	}

	.text_6 {
		margin: 0 4rpx;
		color: #ff841b;
		font-size: 24rpx;
		font-family: Mukta;
		font-weight: 600;
		line-height: 22.7rpx;
	}

	.text_7 {
		line-height: 25.54rpx;
	}

	.image_6 {
		width: 12rpx;
		height: 20rpx;
	}

	.text_8 {
		margin-left: 84rpx;
		color: #00000066;
		font-size: 24rpx;
		font-family: Lantinghei SC;
		line-height: 23.16rpx;
	}

	.group_3 {
		padding-left: 56rpx;
		padding-right: 44rpx;
	}

	.group_4 {
		padding-bottom: 12rpx;
		justify-content: flex-start;
	}
	
	.tag_text{
		margin-right:50rpx;
		padding:0 0 20rpx;
		border-bottom: 4rpx solid rgba(255, 255, 255, 0);
	}
	.tag_text_active{
		border-bottom: 4rpx solid #ff841b;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: Mukta;
		line-height: 26.44rpx;
		font-weight: 700;
		color: #979797;
	}

	.text_9 {
		color: #f08000;
	}

	.text_10 {
		line-height: 26.18rpx;
	}

	.text_11 {
		color: #000000;
		line-height: 18.26rpx;
	}

	.image_7 {
		width: 24rpx;
		height: 22rpx;
	}

	.section_5 {
		background-color: #ff841b;
		width: 110rpx;
		height: 4rpx;
	}

	.image_8 {
		width: 12rpx;
		height: 40rpx;
	}

	.text_12 {
		line-height: 30rpx;
	}

	.text_13 {
		line-height: 30rpx;
	}

	.detail_footer_gap {
		height: 150rpx;
	}

	.detail_footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		width: 100%;
		padding: 36rpx 0;
		background-color: #ffffff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		box-shadow: 0rpx 16rpx 60rpx #6c7e9329;
	}

	.image_11 {
		width: 38rpx;
		height: 32rpx;
	}

	.group_5 {
		padding: 12rpx 8rpx;
		border-radius: 22.5rpx;
		height: 90rpx;
		border-left: solid 2.2rpx #e6e9f1;
		border-right: solid 2.2rpx #e6e9f1;
		border-top: solid 2.2rpx #e6e9f1;
		border-bottom: solid 2.2rpx #e6e9f1;
	}

	.image_9 {
		width: 64rpx;
		height: 64rpx;
	}

	.text_14 {
		color: #2d3142;
		font-size: 36rpx;
		font-family: Mukta;
		line-height: 22.68rpx;
	}

	.image_10 {
		margin-right: 4rpx;
	}

	.section_7 {
		padding: 28rpx 60rpx;
		background-color: #3a7beb;
		border-radius: 20rpx;
		height: 90rpx;
	}

	.text_15 {
		color: #ffffff;
		line-height: 30.36rpx;
	}

	.image_12 {
		width: 28rpx;
		height: 30rpx;
	}

	.detail_boxs {
		width: 100%;
		height: auto;
		margin: 20rpx 0;
	}

	.detail_img {
		width: 100%;
		height: auto;
	}

	.score {
		margin-top: 82rpx;
	}

	.score_no_img {
		width: 152rpx;
		height: 152rpx;
	}

	.score_no_txt {
		color: #9c9eb9;
		line-height: 25.9rpx;
		font-weight: unset;
	}

	.score_box {
		padding: 0 0 0;
	}

	.score_box_msg {
		padding-bottom: 40rpx;
	}

	.score_box_img {
		border-radius: 50%;
		width: 54rpx;
		height: 54rpx;
	}

	.score_box_text {
		line-height: 29.5rpx;
	}

	.score_box_cont {
		padding: 0 24rpx 32rpx;
		background-color: #f7f8fc;
		border-radius: 40rpx;
		height: 156rpx;
	}

	.score_box_part {
		font-size: 28rpx;
		font-family: Mukta;
		line-height: 18.26rpx;
		font-weight: 700;
		color: #000000;
	}

	.score_box_cont_img {
		margin-top: -26rpx;
		width: 38rpx;
		height: 34rpx;
	}

	.score_box_cont_text {
		font-size: 32rpx;
		font-family: Lantinghei SC;
		line-height: 48rpx;
		color: #2d3142;

		margin-left: 12rpx;
		margin-right: 28rpx;
	}

	.list-item {
		margin-bottom: 30rpx;
	}

	.img_active {
		margin-bottom: 20rpx;
	}

	.goods_title {
		width: 100%;
		font-size: 40rpx;
		color: #171717;
		margin: 180rpx 0 -20rpx;
	}
</style>